<template>
  <el-config-provider :theme="currentTheme">
    <router-view />
  </el-config-provider>
</template>
<script setup>
import { ref, computed,watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useDark } from "@vueuse/core";
import {
  havePermission,
  noPermission,
  hasPermission,
} from "@/utils/permission";

const isDark = useDark();
const currentTheme = ref('default'); // 可以根据需要初始化

// 监听 currentTheme 变化并更新 data-theme 属性
watch(currentTheme, (newValue) => {
  document.documentElement.setAttribute('data-theme', newValue);
});
const menuList = ref([]);
if (!hasPermission()) {
  menuList.value = noPermission;
} else {
  menuList.value = havePermission;
}
const route = useRoute();
const router = useRouter();
const isLoginPage = computed(() => {
  return route.path === "/login";
});
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};
// 解决ERROR ResizeObserver loop completed with undelivered notifications.
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
};
const token = localStorage.getItem("token");
console.log(token);
if (!token) router.push("/login");
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
:root {
  --background-color: #f8f9fa; /* 默认背景色 */
  --text-color: #f50000; /* 默认文字颜色 */
}

/* 自定义主题 */
:root[data-theme='blue'] {
  --background-color: #add8e6;
  --text-color: #000000;
}

:root[data-theme='green'] {
  --background-color: #90ee90;
  --text-color: #000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
